<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      :multiple="false"
      :show-file-list="false"
      :action="url"
      :headers="headers"
      :data="requestData"
      :on-error="handleError"
      :on-progress="onProgress"
      :on-success="handleFileSuccess"
      :before-upload="beforeUploadFile"
    >
      <div v-if="!loading">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__text">{{ tipsName }}</div>
      </div>
      <el-progress
        v-else
        class="t-m-t-20"
        type="circle"
        :percentage="uploadPercent"
      ></el-progress>
    </el-upload>
    <div v-if="fileUrl" class="t-flex">
      <a target="_blank" class="type-primary" :href="fileUrl">{{
        fileUrl.split("/")[fileUrl.split("/").length - 1]
      }}</a>
      <i
        v-if="isClose"
        @click="del"
        class="t-m-l-10 hover-class type-error el-icon-error"
      ></i>
    </div>
  </div>
</template>
<script>
import {
    getToken,
    getTokenType,
    getMenucode
} from "@/utils/common"
export default {
  props: {
    value: {
      type: String,
    },
    url: {
      type: String,
      default: process.env.VUE_APP_UPLOAD_API + "/api/Server/UploadFile",
    },
    tips: {
      type: String,
      default: "",
    },
    size: {
      type: Number,
      default: 500,
    },
    formatValue: {
      type: Array,
      default: () => {
        return ["mp4", "ogg", "flv", "avi", "wmv", "rmvb"];
      },
    },
    id: {
      type: Number,
      default: 0,
    },
    isClose: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    deep: true,
    id(v) {
      this.requestData.businessType = v;
    },
    value(v) {
      this.fileUrl = v;
    },
  },
  data() {
    return {
      loading: false,
      fileUrl: this.value,
      requestData: {
        fileName: "",
        businessType: "",
        businessId: 0,
      },
      tipsName: "",
      uploadPercent: 0,
      headers:{
        Authorization: getTokenType() + ' ' + getToken(),
        'oa-original-menucode':getMenucode()
      }
    };
  },
  mounted() {
    this.requestData.businessType = this.id;
    this.tipsName =
      "上传" + this.formatValue.join() + "文件，且不超过" + this.size + "MB";
  },
  methods: {
    onProgress(event, file, fileList) {
      this.loading = true;
      this.uploadPercent = Number(file.percentage.toFixed(0));
    },
    handleFileSuccess(res, file) {
      if (res.code === 0) {
        this.fileUrl = res.data.FileDownInfos[0].Url;
        this.$emit("success", res);
        this.$emit("input", this.fileUrl);
        this.$message.success("上传成功！");
      } else {
        this.$message.error("上传失败！");
      }
      this.loading = false;
    },
    beforeUploadFile(file) {
      let isLtExceed = file.size / 1024 / 1024 < this.size;
      let fileType = "";
      let name = file.name.split(".");
      fileType = name[name.length - 1];
      if (this.formatValue.join().indexOf(fileType) == -1) {
        this.$message.error("请上传正确的格式" + this.formatValue.join());
        this.loading = false;
        return false;
      }
      if (!isLtExceed) {
        this.$message.error("上传文件大小不能超过" + this.size + "MB哦!");
        return false;
      }
      this.$emit('beforeUploadFile',file)
      this.loading = true;
      this.requestData.fileName = file.name;
      this.requestData.businessId = file.uid;
      
    },
    handleError() {
      this.$message.error("上传失败！");
      this.loading = false;
    },
    del() {
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$emit("input", "");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-icon-upload {
  margin-top: 30px;
  margin-bottom: 10px;
}
</style>